<!DOCTYPE html>
<html>
<head>
<script src="layui/layui.js" type="text/javascript" charset="UTF-8"></script>
<link href="layui/css/layui.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.8.2.js" charset="UTF-8"></script>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<table id="demo" lay-filter="test"></table>
 
<script src="/layui/layui.js"></script>
<script>
layui.use('table', function(){
  var table = layui.table;
  
  //第一个实例
  table.render({	 
    elem: '#demo'
    ,height: 315
    ,url: 'Qb' //数据接口
    ,page: true //开启分页
    ,cols: [[ //表头
      {field: 'id', title: 'ID',  sort: true, fixed: 'left'}
      ,{field: 'name', title: '姓名', }
      ,{field: 'sex', title: '性别', }
      ,{field: 'birth', title: '生日', } 
      ,{field: 'nl', title: '年龄', }
      ,{field: 'dizi', title: '地址', }
      ,{field: 'zw', title: '职位', }
      ,{field: 'right', align:'center',toolbar:'#barDemo'}
    ]]
  });
 
//监听工具条
table.on('tool(test)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
 var data = obj.data; //获得当前行数据
 var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
 var tr = obj.tr; //获得当前行 tr 的DOM对象
 console.log(data);
 if (layEvent === 'detail') { //查看
   
  //do somehing
 } else if (layEvent === 'del') { //删除
  layer.confirm('真的删除行么', function(index) {
   obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
   layer.close(index);
   //向服务端发送删除指令
   //写对应ajax
   $.ajax({ 
    url : "ScServlet",

    type : "get",//请求方式
    data : {//参数
     id : data.id
    },
    success : function(res) {//成功以后的回调函数
     if (res == 1) {
      alert("删除成功！");
      window.location.reload();
     } else {
      alert("删除失败！");
     }
    }
   });

  });
  } else if(layEvent === 'edit'){ //编辑
    //do something
    
    layer.open({
      type : 1, //Page层类型
      area : [ '800px', '400px' ],
      title : [ '编辑员工信息', 'font-size:18px' ],
      shadeClose : true,
      shade : 0, //遮罩透明度
      maxmin : true, //允许全屏最小化
      content : $("#updateForm"), //弹窗路径
      success : function(layero, index) {
       $('#id').val(data.id);
       $('#name').val(data.name);
       $('#sex').val(data.sex);
       $('#birth').val(data.birth);
       $('#nl').val(data.nl);
       $('#dizi').val(data.dizi);
       $('#zw').val(data.zw);
       $('#imgUrl').attr("src", data.imgUrl);
      },

     });
 
	layui.use('upload', function() {
		var upload = layui.upload;

		//执行实例
		var uploadInst = upload.render({
			elem : '#img' //绑定元素
			,
			url : 'upload' //上传接口
			,
			done : function(res) {
				//上传完毕回调
				$("img").attr("src", res.data);
			},
			error : function() {
				//请求异常回调
				//alert("上传失败");
			}
		});
	});

	layui.use([ 'laydate', 'form' ], function() {
		var laydate = layui.laydate;
		var form = layui.form;
		//执行一个laydate实例
		laydate.render({
			elem : '#createdate' //指定元素
		});

		
		form.on('submit(btn)', function(data) {
			console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
			console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
			console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}

			data.field.imgurl = $("img").attr("src");

			//写对应ajax
			$.ajax({
				url : "Xg",//地址
				type : "get",//请求方式
				data : data.field,
				success : function(res) {//成功以后的回调函数
					if (res == 1) {
						alert("修改成功！");
						window.location.reload();
					} else {
						alert("修改失败！");
					}
				}
			});

			return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
		});

	});
}
});

});


</script>
	<script type="text/html" id="imgTpl">
    < img src="{{d.imgUrl}}" />
 </script>
 <!-- 行内工具栏 -->
 
 <script type="text/html" id="barDemo">
        
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</ a>
     <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</ a>
 </script>
 <!-- 编辑表单 -->
 <div id="updateForm" style="display: none">
  <form class="layui-form" lay-filter="updateform">
   <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
   <div class="layui-form-item">
    <label class="layui-form-label">编号</label>
    <div class="layui-input-block">
     <input type="text" name="id" placeholder="请输入" autocomplete="off"
      class="layui-input" id="id" disabled="disabled">
    </div>
   </div>
   
   <div class="layui-form-item">
    <label class="layui-form-label">名字</label>
    <div class="layui-input-block">
     <input type="text" name="name" placeholder="请输入"
      autocomplete="off" class="layui-input" id="name">
    </div>
   </div>
   
   <div class="layui-form-item">
    <label class="layui-form-label">性别</label>
    <div class="layui-input-block">
     <input type="text" name="sex" placeholder="请输入"
      autocomplete="off" class="layui-input" id="sex">
    </div>
   </div>
   <div class="layui-form-item">
    <label class="layui-form-label">生日</label>
    <div class="layui-input-block">
     <input type="text" name="birth" placeholder="请输入"
      autocomplete="off" class="layui-input" id="birth" >
    </div>
   </div>
   <div class="layui-form-item">
    <label class="layui-form-label">年龄</label>
    <div class="layui-input-block">
     <input type="text" name="nl" placeholder="请输入"
      autocomplete="off" class="layui-input" id="birth" >
    </div>
   </div>
   <div class="layui-form-item">
    <label class="layui-form-label">地址</label>
    <div class="layui-input-block">
     <input type="text" name="dizi" placeholder="请输入"
      autocomplete="off" class="layui-input" id="dizi">
    </div>
   </div>
   <div class="layui-form-item">
    <label class="layui-form-label">职位</label>
    <div class="layui-input-block">
     <input type="text" name="zw" placeholder="请输入"
      autocomplete="off" class="layui-input" id="zw">
    </div>
   </div>
           
   <div class="layui-form-item">
    <div class="layui-input-block">
     <button class="layui-btn" lay-submit lay-filter="btn">立即提交</button>
     <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
   </div>
   <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
  </form>
 </div>

</body>
</html>